/*
[目标]：实现登录时，使用vuex 存储用户Token，退出登录删除用户Token
[步骤]：
1. 在 state 里面提供数据
2. 在mutations 里面提供同步代码 ----> 是修改数据的唯一入口
3. 在actions 里面提供异步代码 ----> 最终通过上下文提交 mutation修改数据
4. 默认导出 需要命名空间
*/

import { loginAPI, userInforAPI } from '@/api/user'
import { setToken, removeToken, getToken } from '@/utils/auth'

const state = {
  token: getToken(),
  userInfor: {}
}

const mutations = {
  setToken(state, newToken) {
    // 将newtToken保存到vuex中
    state.token = newToken
    // 将newToken保存到本地存储中
    setToken(newToken)
  },
  removeToken() {
    // 将 token从vuex中删除
    state.token = ''
    // 将本地存储中的token删除
    removeToken()
  },
  setUserInfor(state, newUserInfor) {
    state.userInfor = newUserInfor
  }

}

const actions = {
  // 发送登录请求
  async login(context, data) {
    const { mobile, password } = data
    // 1.发请求
    const token = await loginAPI({ mobile, password })
    // 2.获取token
    state.token = token
    // 3.通知mutation 保存token
    context.commit('setToken', token)
  },
  async  getUserInfo(context) {
    const res = await userInforAPI()
    // console.log(res)
    context.commit('setUserInfor', res)
  },
  logout(context) {
    //  1.清空token
    // removeToken()
    // !在action方法中调用mutation方法，不能之际赋值，只能使用commit方法
    context.commit('removeToken')
    //  2.清空用户信息
    state.userInfor = {}
  }
}

export default {
  namespaced: true, // 启用命名空间之后，state、getters、mutations、actions中的方法会自动加上模块名，这样不会冲突
  state,
  mutations,
  actions
}
